<template>
  <div class="content" id="cesss">
    <div class="edit" id="edit">
<!--      <el-button @click="caij">裁剪</el-button>-->
<!--      <cropper v-if="cropper.state" :parentId="cropper.parentId" :imgUrl="cropper.imgUrl" :cropper-info="cropper.style" :img-info="cropper.imgInfo" @handleCropper="handleCropper"/>-->

<!--      <canvas id="canvas" width="200" height="200"></canvas>-->
<!--      <svg-icon icon-class="cut"></svg-icon>-->
<!--      <drop-select />-->
<!--      <b-page :page-num.sync="pageNum" :page-size.sync="pageSize" :total="600" @change="clickA"></b-page>-->

<!--      <canvas-operate />-->
      <span style="font-family: aaaa;">头像无故如果不</span>
<!--      <img src="https://cdn.qingning6.com/watermark_template/4253895458308160/thumb_1621493083585.png" />-->
<!--      <canvas id="canvas" width="400" height="1000" style="background: #2d8cf0"></canvas>-->
    </div>
  </div>
</template>

<script>
// import Cropper from 'cropperjs'
import image from '@/assets/1.jpg'
// import Cropper from '@/components/cropper/index'
import Cropper from '@/components/cropper/cropper'
import DropSelect from '@/components/select/index'
import BPage from '@/components/BPage/index'
import CanvasOperate from '@/components/canvasOperate/index'
// import common from '@/views/test/common'
import canvasApi from '@/utils/canvasApi'
import domtoimage from '@/utils/domTO'

export default {
  name: 'Center',
  components: {
    CanvasOperate,
    BPage,
    DropSelect,
    Cropper
  },
  data() {
    return {
      image: image,
      pageNum: 2,
      pageSize: 30,
      state: true,
      rotate: 0,
      cropperState: false,
      imageStyle: {
        width: 160,
        height: 106,
        left: 10,
        top: 150,
        rotate: 0
      },
      imgInfo: {
        left: 0,
        top: 0,
        width: 4000,
        height: 2669,
        scaleX: 0.04,
        scaleY: 0.04
      },
      imgData: {
        contain: {
          width: 160,
          height: 107,
          left: 10,
          top: 100
        },
        canvas: {
          left: 0,
          top: 0,
          width: 0,
          height: 0
        },
        cropBox: {
          left: 0,
          top: 0,
          width: 0,
          height: 0
        },
        cropBoxImg: {
          left: 0,
          top: 0
        }
      },
      text: '无与伦比',
      cropper: {
        state: false,
        style: {},
        imgInfo: {},
        imgUrl: '',
        parentId: 'edit',
        saveData: {}
      }
    }
  },
  computed: {
    getImgInfo() {
      const styleObj = {
        ...this.imgInfo,
        width: this.imgInfo.width * this.imgInfo.scaleX,
        height: this.imgInfo.height * this.imgInfo.scaleY
      }
      const needUnitStr = ['width', 'height']
      const style = {}
      for (const key in styleObj) {
        if (needUnitStr.includes(key)) {
          style[key] = styleObj[key] + 'px'
        } else if (key !== 'left' && key !== 'top') {
          style[key] = styleObj[key]
        }
      }
      style.transform = `translate(${styleObj.left}px, ${styleObj.top}px)`
      return style
    },
    getText() {
      const textArr = this.text.split('')
      return textArr
    }
  },
  mounted() {
    // this.cutTest()
    this.handleImage()
    setTimeout(() => {
      // this.setCanvas()
    }, 2000)

    const t = setTimeout(() => {
      clearTimeout(t)
      const el = document.getElementById('cesss')
      const start = new Date().valueOf()
      console.log(el, domtoimage, '55555555555555555555555555555', start)
      domtoimage.toPng(el).then(data => {
        console.log(new Date().valueOf() - start, '44444444444444')
        var img = new Image()
        img.src = data
        document.body.appendChild(img)
      })
    }, 4000)
  },
  methods: {
    setCanvas() {
      const canvas = document.getElementById('canvas')
      const context = canvas.getContext('2d')
      context.font = '102px AlibabaPuHuiTiB'
      context.textAlign = 'right'
      context.textBaseline = 'top'
      context.fillTextVertical('招聘g', { x: 400, lineHeight: 132.6, maxHeight: 1000, fontLineHeight: 132.6, fontHeight: 102, letterSpacing: 0, charRotate: false, asc: 1.05, dec: 0.322, textAlign: 'bottom', errScale: 1 })
      const imageData = context.getImageData(0, 0, 400, 400)
      const top = canvasApi.topScanBottom(imageData)
      const right = canvasApi.rightScanLeft(imageData)
      // context.clearRect(0, 0, 400, 400)
      context.fillTextVerticalA('招聘', { x: 0, lineHeight: 122, maxHeight: 1000, fontLineHeight: 122, fontHeight: 122, charRotate: true, dec: 0.3 })
      const imageDataA = context.getImageData(0, 0, 400, 1000)
      const bottom = canvasApi.bottomScanTop(imageDataA)
      const left = canvasApi.leftScanRight(imageDataA)
      console.log({ top, right, bottom, left }, context.saveTextArr)
      console.log(canvasApi.getVerticalRender('招聘', {
        fontSize: 102,
        fontFamily: 'AlibabaPuHuiTiB',
        width: 400,
        height: 1000,
        fontLineHeight: 132.6,
        asc: 1.05,
        dec: 0.322,
        leading: 0,
        fontHeight: 102,
        lineHeight: 132.6
      }), 'api')
     /* // 水平文字测试
      const start = new Date().valueOf()
      context.wrapText('谎 问\n阿萨德环ccc按时大大阿萨德', {
        maxWidth: 400,
        y: 0,
        fontLineHeight: 95.9,
        lineHeight: 95.9,
        errScale: 0.8,
        asc: 1.05
      })
      const imageData = context.getImageData(0, 0, 500, 400)
      console.log(imageData)
      const top = canvasApi.topScanBottom(imageData)
      const bottom = canvasApi.bottomScanTop(imageData)
      const left = canvasApi.leftScanRight(imageData)
      const right = canvasApi.rightScanLeft(imageData)
      const aheight = imageData.height - bottom
      const row = (aheight - 70 + 80) / 80
      const height = 70 + 80 * (Math.ceil(row) - 1)
      console.log({
        top,
        right,
        bottom,
        left,
        height: imageData.height - top - bottom,
        row
      }, new Date().valueOf() - start, height - aheight)
      console.log(canvasApi.getHorizontalRender('谎 问\n阿萨德环ccc按时大大阿萨德', {
        fontSize: 70,
        fontFamily: 'AlibabaPuHuiTiB',
        width: 400,
        height: 400,
        fontLineHeight: 95.9,
        lineHeight: 95.9,
        asc: 1.05
      })) */
    },
    clickA(data) {
      console.log(data)
    },
    handleCropper(data) {
      this.cropperState = false
      console.log(data)
      const { left, top, width, height, rotate, imgInfo } = data
      this.imageStyle = {
        width,
        height,
        top,
        left,
        rotate
      }
      this.imgInfo = {
        left: imgInfo.left,
        top: imgInfo.top,
        width: imgInfo.width,
        height: imgInfo.height,
        scaleX: imgInfo.scaleX,
        scaleY: imgInfo.scaleY
      }
    },
    getStyle(styleObj, state) {
      const needUnitStr = ['width', 'height']
      const style = {}
      for (const key in styleObj) {
        if (needUnitStr.includes(key)) {
          style[key] = styleObj[key] + 'px'
        } else if (key !== 'left' && key !== 'top') {
          style[key] = styleObj[key]
        }
      }
      style.transform = `translate(${styleObj.left}px, ${styleObj.top}px)`
      if (styleObj.rotate) {
        style.transform = `rotate(${styleObj.rotate}deg) translate(${styleObj.left}px, ${styleObj.top}px)`
      }
      if (state) {
        style.top = styleObj.top + 'px'
        style.left = styleObj.left + 'px'
        style.transform = 'none'
        if (styleObj.rotate) {
          style.transform = `rotate(${styleObj.rotate}deg)`
        }
      }
      return style
    },
    caij() {
      /* if (!this.state) {
        this.cutTest()
      }
      this.state = !this.state*/

      // this.cropperState = true
      this.cropper = {
        state: true,
        style: {
          width: 160,
          height: 106,
          left: 10,
          top: 150,
          rotate: 60
        },
        imgInfo: {
          left: 0,
          top: 0,
          width: 4000,
          height: 2669,
          scaleX: 0.04,
          scaleY: 0.04,
          rotate: 0
        },
        imgUrl: image,
        parentId: 'edit',
        saveData: {

        }
      }
    },
    cutTest() {
      const image = document.getElementById('img')
      new Cropper(image, {
        // aspectRatio: 16 / 9,
        viewMode: 0,
        dragMode: 'move',
        autoCropArea: 1,
        movable: true,
        cropBoxMovable: false,
        modal: true,
        background: false,
        crop(event) {
          console.log(event)
          console.log(event.detail)
        }
      })
    },
    handleImage() {
      this.imgData.canvas = {
        ...this.imgData.canvas,
        width: this.imageStyle.width,
        height: this.imageStyle.height
      }
      /* this.imgData.img = {
        width: this.imageStyle.width,
        height: this.imageStyle.height
      }*/
      this.imgData.cropBox = {
        ...this.imgData.cropBox,
        width: this.imageStyle.width,
        height: this.imageStyle.height
      }
      /* this.imgData.cropBoxImg = {
        ...this.imgData.cropBoxImg,
        width: this.imageStyle.width,
        height: this.imageStyle.height
      }*/
    },
    handleCanvasDown(e) {
      const canvas = { ...this.imgData.canvas }
      const { top, left } = canvas
      const { top: cTop, left: cLeft } = this.imgData.cropBox
      const parentPosition = document.getElementById('edit').getBoundingClientRect()
      const ex = e.pageX - parentPosition.x
      const ey = e.pageY - parentPosition.y
      const move = moveE => {
        moveE.stopPropagation()
        moveE.preventDefault()
        const currX = moveE.pageX - parentPosition.x
        const currY = moveE.pageY - parentPosition.y
        const skewVal = Math.sqrt(Math.pow(currX - ex, 2) + Math.pow(currY - ey, 2))
        const deg = Math.acos((currX - ex) / skewVal) * 180 / Math.PI
        if (currY - ey > 0) {
          canvas.top = skewVal * Math.sin((deg - this.rotate) * Math.PI / 180) + top
          canvas.left = skewVal * Math.cos((deg - this.rotate) * Math.PI / 180) + left
        } else {
          canvas.top = -skewVal * Math.sin((deg + this.rotate) * Math.PI / 180) + top
          canvas.left = skewVal * Math.cos((deg + this.rotate) * Math.PI / 180) + left
        }
        this.imgData.canvas = {
          ...canvas
        }
        const newILeft = -cLeft + canvas.left
        const newITop = -cTop + canvas.top
        this.imgData.cropBoxImg = {
          ...this.imgData.cropBoxImg,
          left: newILeft,
          top: newITop
        }
      }
      const up = () => {
        const { left, top, width, height } = this.imgData.cropBox
        const {
          left: cLeft,
          top: cTop,
          width: cWidth,
          height: cHeight
        } = this.imgData.canvas
        let newLeft = left >= cLeft ? cLeft : left
        let newTop = top >= cTop ? cTop : top
        newLeft = cLeft + cWidth >= left + width ? newLeft : left + width - cWidth
        newTop = cTop + cHeight >= top + height ? newTop : top + height - cHeight
        this.imgData.canvas.left = newLeft
        this.imgData.canvas.top = newTop
        this.imgData.cropBoxImg.left = newLeft - this.imgData.cropBox.left
        this.imgData.cropBoxImg.top = newTop - this.imgData.cropBox.top
        document.removeEventListener('mousemove', move, true)
        document.removeEventListener('mouseup', up, true)
      }
      document.addEventListener('mousemove', move, true)
      document.addEventListener('mouseup', up, true)
      return true
    },
    handleDown(e) {
      e.preventDefault()
      const cropperAction = e.target.dataset.cropperAction
      if (cropperAction && cropperAction !== 'move') {
        const cropBox = {
          ...this.imgData.cropBox
        }
        const { left, top, width, height } = cropBox
        const { left: cLeft, top: cTop } = this.imgData.canvas
        const parentPosition = document.getElementById('edit').getBoundingClientRect()
        const ex = e.pageX - parentPosition.x
        const ey = e.pageY - parentPosition.y
        const oldPoint = {
          left,
          top,
          width,
          height
        }
        const move = (moveE) => {
          const moveX = moveE.pageX - parentPosition.x
          const moveY = moveE.pageY - parentPosition.y
          const skewVal = Math.sqrt(Math.pow(moveX - ex, 2) + Math.pow(moveY - ey, 2))
          const deg = Math.acos((moveX - ex) / skewVal) * 180 / Math.PI
          let offsetX = 0
          let offsetY = 0
          if (moveY - ey > 0) {
            offsetX = skewVal * Math.cos((deg - this.rotate) * Math.PI / 180)
            offsetY = skewVal * Math.sin((deg - this.rotate) * Math.PI / 180)
          } else {
            offsetX = skewVal * Math.cos((deg + this.rotate) * Math.PI / 180)
            offsetY = -skewVal * Math.sin((deg + this.rotate) * Math.PI / 180)
          }
          const hasT = /n/.test(cropperAction)
          const hasB = /s/.test(cropperAction)
          const hasL = /w/.test(cropperAction)
          const hasR = /e/.test(cropperAction)
          let newWidth = width + (hasL ? -offsetX : hasR ? offsetX : 0)
          let newHeight = height + (hasT ? -offsetY : hasB ? offsetY : 0)
          let newLeft = left + (hasL ? offsetX : 0)
          let newTop = top + (hasT ? offsetY : 0)
          if (cropperAction.length === 2) {
            const scaleVal = Math.abs(offsetX) < Math.abs(offsetY) ? Math.abs(offsetX) : Math.abs(offsetY)
            if (hasL && hasT) {
              newLeft = left + (offsetX > 0 ? scaleVal : -scaleVal)
              newTop = top + (offsetX > 0 ? scaleVal : -scaleVal)
              newWidth = width + (offsetX > 0 ? -scaleVal : scaleVal)
              newHeight = height + (offsetX > 0 ? -scaleVal : scaleVal)
            }
            if (hasL && hasB) {
              newLeft = left + (offsetX > 0 ? scaleVal : -scaleVal)
              newWidth = width + (offsetX > 0 ? -scaleVal : scaleVal)
              newHeight = height + (offsetX > 0 ? -scaleVal : scaleVal)
            }
            if (hasR && hasT) {
              newTop = top + (offsetX > 0 ? -scaleVal : scaleVal)
              newWidth = width + (offsetX > 0 ? scaleVal : -scaleVal)
              newHeight = height + (offsetX > 0 ? scaleVal : -scaleVal)
            }
            if (hasR && hasB) {
              newWidth = width + (offsetX > 0 ? scaleVal : -scaleVal)
              newHeight = height + (offsetX > 0 ? scaleVal : -scaleVal)
            }
          }
          newHeight = newHeight > 0 ? newHeight : 0
          newWidth = newWidth > 0 ? newWidth <= 750 ? newWidth : 750 : 0
          this.imgData.cropBox = {
            ...this.imgData.cropBox,
            width: newWidth,
            height: newHeight,
            left: newLeft,
            top: newTop
          }
          this.imgData.cropBoxImg = {
            ...this.imgData.cropBoxImg,
            left: cLeft - newLeft,
            top: cTop - newTop
          }
        }
        const up = () => {
          const { left, top, width, height } = this.imgData.cropBox
          const point = {
            left,
            top,
            width,
            height
          }
          const {
            left: cLeft,
            top: cTop,
            width: cWidth,
            height: cHeight
          } = this.imgData.canvas
          let newPoint = {
            left: cLeft,
            top: cTop,
            width: cWidth,
            height: cHeight
          }
          if (cWidth < width || cHeight < height) {
            newPoint = this.getNewCoordinate(point, oldPoint, this.imgData.canvas)
          } else {
            let newLeft = left >= cLeft ? cLeft : left
            let newTop = top >= cTop ? cTop : top
            newLeft = cLeft + cWidth >= left + width ? newLeft : left + width - cWidth
            newTop = cTop + cHeight >= top + height ? newTop : top + height - cHeight
            newPoint.left = newLeft
            newPoint.top = newTop
          }
          this.imgData.canvas.left = newPoint.left
          this.imgData.canvas.top = newPoint.top
          this.imgData.canvas.width = newPoint.width
          this.imgData.canvas.height = newPoint.height
          // this.imgData.img.width = newPoint.width
          // this.imgData.img.height = newPoint.height
          this.imgData.cropBoxImg.left = newPoint.left - left
          this.imgData.cropBoxImg.top = newPoint.top - top
          // this.imgData.cropBoxImg.width = newPoint.width
          // this.imgData.cropBoxImg.height = newPoint.height
          // this.imgData.contain.left = newData.x
          // this.imgData.contain.top = newData.y
          // this.imgData.contain.width = newPoint.width
          // this.imgData.contain.height = newPoint.height
          document.removeEventListener('mousemove', move)
          document.removeEventListener('mouseup', up)
        }
        document.addEventListener('mousemove', move)
        document.addEventListener('mouseup', up)
      }
    },
    getNewCoordinate(point, oldPoint, canvasPoint) {
      const center = {
        x: point.width / 2,
        y: point.height / 2
      }
      const oldCenter = {
        x: oldPoint.width / 2,
        y: oldPoint.height / 2
      }
      const offsetX = Math.abs((center.x - oldCenter.x) * 2) - Math.abs(oldPoint.width - canvasPoint.width) > 0 ? Math.abs((center.x - oldCenter.x) * 2) - Math.abs(oldPoint.width - canvasPoint.width) : 0
      const offsetY = Math.abs((center.y - oldCenter.y) * 2) - Math.abs(oldPoint.height - canvasPoint.height) > 0 ? Math.abs((center.y - oldCenter.y) * 2) - Math.abs(oldPoint.height - canvasPoint.height) : 0
      const scaleX = offsetX / oldPoint.width
      const scaleY = offsetY / oldPoint.height
      const scale = scaleX >= scaleY ? scaleX : scaleY
      if (scaleX === scaleY) {
        return {
          left: point.left,
          top: point.top,
          width: point.width,
          height: point.height
        }
      } else {
        if (scaleX) {
          const scaleHeight = canvasPoint.height + canvasPoint.height * scale
          return {
            left: point.left,
            top: point.top + (point.height - scaleHeight) / 2,
            width: point.width,
            height: scaleHeight
          }
        }
        if (scaleY) {
          const scaleWidth = canvasPoint.width + canvasPoint.width * scale
          return {
            left: point.left + (point.width - scaleWidth) / 2,
            top: point.top,
            width: scaleWidth,
            height: point.height
          }
        }
      }
    },
    inputChange(val) {
      console.log(val)
      this.imageStyle.rotate = val
    }
  }
}
</script>

<style lang="scss" scoped>

.text {
  width: 60px;
  background-image: linear-gradient(0deg, rgb(141, 102, 236) 0%, rgb(19, 31, 120) 50%, rgb(242, 172, 253) 100%);
  -webkit-background-clip: text;
  color: transparent;
  font-size: 60px;
  line-height: 1;
  font-family: AlibabaPuHuiTiB;
  -webkit-text-stroke: 1px rgba(255, 0, 0, 0.6);
  position: absolute;
  left: 0;
  top: 0;
  //text-decoration: underline;
  & span {
    display: block;
    margin-bottom: 20px;
    //position: relative;
    &:after {
      content: ' ';
      //position: absolute;
      //left: 0;
      //bottom: -10px;
      border-top: 2px solid var(--border-color);
      border-bottom: 2px solid var(--border-color);
      height: 10px;
      width: 100%;
      display: block;
    }

    &:first-child:after {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      border-left: 2px solid var(--border-color);
    }

    &:last-child:after {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      border-right: 2px solid var(--border-color);
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.content {
  background: #edeff1;
  display: flex;
  justify-content: center;

  .edit {
    background-color: #fff;
    margin-top: 25px;
    width: 375px;
    height: 644px;
    position: relative;
  }
}

#img {
  //width: 200px;
  //position: absolute;
  //left: 20px;
  //top: 200px;
}

.parent-img {
  position: relative;
  overflow: hidden;
  border: 1px solid #20a0ff;
}

.contain {
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: absolute;

  .wrap-box, .canvas {
    overflow: hidden;
  }

  .canvas-hide {
    display: block;
    height: 0;
    position: absolute;
    width: 0;
  }

  .move {
    cursor: move;
    pointer-events: none;
  }

  .modal {
    background-color: #000;
    opacity: 0.5;
  }

  .crop-box {
    .view-box {
      display: block;
      height: 100%;
      outline: 1px solid rgba(51, 153, 255, 0.75);
      overflow: hidden;
      width: 100%;
    }

    .dashed {
      border: 0 dashed #eee;
      display: block;
      opacity: 0.5;
      position: absolute;
      pointer-events: none;

      &.dashed-h {
        border-bottom-width: 1px;
        border-top-width: 1px;
        height: calc(100% / 3);
        left: 0;
        top: calc(100% / 3);
        width: 100%;
      }

      &.dashed-v {
        border-left-width: 1px;
        border-right-width: 1px;
        height: 100%;
        left: calc(100% / 3);
        top: 0;
        width: calc(100% / 3);
      }
    }

    .face, .line, .point {
      display: block;
      height: 100%;
      opacity: 0.1;
      position: absolute;
      width: 100%;
    }

    .face {
      background-color: #fff;
      left: 0;
      top: 0;
    }

    .line {
      background-color: #39f;

      &.line-e {
        cursor: ew-resize;
        right: -3px;
        top: 0;
        width: 5px
      }

      &.line-n {
        cursor: ns-resize;
        height: 5px;
        left: 0;
        top: -3px;
      }

      &.line-w {
        cursor: ew-resize;
        left: -3px;
        top: 0;
        width: 5px;
      }

      &.line-s {
        bottom: -3px;
        cursor: ns-resize;
        height: 5px;
        left: 0;
      }
    }

    .point {
      background-color: #39f;
      height: 5px;
      opacity: 0.75;
      width: 5px;

      &.point-e {
        cursor: ew-resize;
        margin-top: -3px;
        right: -3px;
        top: 50%;
      }

      &.point-n {
        cursor: ns-resize;
        left: 50%;
        margin-left: -3px;
        top: -3px;
      }

      &.point-w {
        cursor: ew-resize;
        left: -3px;
        margin-top: -3px;
        top: 50%;
      }

      &.point-s {
        bottom: -3px;
        cursor: s-resize;
        left: 50%;
        margin-left: -3px;
      }

      &.point-ne {
        cursor: nesw-resize;
        right: -3px;
        top: -3px;
      }

      &.point-nw {
        cursor: nwse-resize;
        left: -3px;
        top: -3px;
      }

      &.point-sw {
        bottom: -3px;
        cursor: nesw-resize;
        left: -3px;
      }

      &.point-se {
        bottom: -3px;
        cursor: nwse-resize;
        height: 5px;
        opacity: 1;
        right: -3px;
        width: 5px;
      }
    }
  }

  .wrap-box, .canvas, .drag-box, .crop-box, .modal {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

  img {
    display: block;
    image-orientation: 0deg;
    max-height: none !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100%;
    height: 100%;
  }
}

</style>
